<template>
 <div>
    <p>添加管理员</p>
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">

        <a-form-item label="角色" v-bind="validateInfos.role">
            <a-select v-model:value="modelRef.role" placeholder="" style="width:300px;">
                <a-select-option v-for="(item,index) in datas" :key="index" :value="item.name">{{item.name}}</a-select-option>
                <!-- <a-select-option value="beijing">Zone two</a-select-option> -->
            </a-select>
        </a-form-item>
        <a-form-item label="登录名字" v-bind="validateInfos.name">
            <a-input
                v-model:value="modelRef.name"
                @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
                style="width:500px;"
            />
        </a-form-item>
        <a-form-item label="密码" v-bind="validateInfos.password">
            <a-input
                v-model:value="modelRef.password"
                @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
                style="width:500px;"
            />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click.prevent="onSubmit">添加</a-button>
            <a-button style="margin-left: 10px" @click="shibai()">取消</a-button>
        </a-form-item>
  </a-form>
 </div>
</template>

<script setup>
import {getRoleData} from '../../../api/role'
import {postManagerData} from '../../../api/manager'
import { defineComponent, reactive, toRefs,toRaw,onMounted } from 'vue';
import { Form } from 'ant-design-vue';
import { useRouter } from 'vue-router'

let query = reactive({datas:[]})
const router = useRouter()
onMounted(()=>{
    getdata()
})
const getdata = async()=>{
    let {data} = await getRoleData()
    query.datas = data.data
    console.log(data.data);
}

const useForm = Form.useForm;
const modelRef = reactive({
    name: '',
    role: undefined,
    password:''
});

const rulesRef = reactive({
    name: [
    {
        required: true,
        message: 'Please input Activity name',
    },
    {
        min: 1,
        max: 100,
        message: 'Length should be 3 to 5',
        trigger: 'blur',
    },
    ],
    password: [
    {
        required: true,
        message: 'Please input Activity password',
    },
    {
        min: 1,
        max: 100,
        message: 'Length should be 3 to 5',
        trigger: 'blur',
    },
    ],
    role: [
    {
        required: true,
        message: 'Please select role',
    },
    ],
});
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);

const onSubmit = () => {
    validate()
    .then(() => {
        console.log(toRaw(modelRef));
        let qq = toRaw(modelRef)
        let eq = {"name":qq.name,"role":qq.role}
        postManagerData(eq)
        shibai()
    })
    .catch(err => {
        console.log('error', err);
    });
};

const shibai =  async ()=>{
    await router.push({path:'admin_list'})
}
let {datas} = toRefs(query)
</script>

<style lang="scss" scoped>
</style>